<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>147_148_删除_添加</title>
		<style>
			.outter {
				width: 400px;
				margin: 100px auto;
				text-align: center;
			}

			table {
				width: 400px;
				border-collapse: collapse;
				margin-bottom: 20px;
			}

			td,
			th {
				border: 1px black solid;
				padding: 10px 0px;
			}

			form div {
				margin: 10px;
			}

			.delete {
				color: blue;
				text-decoration: underline;
			}
		</style>

		<script>
			window.onload = function() {

				function delEmpHandler() {
					//弹出一个友好的提示，confirm弹框，true 确定，false 取消
					// const parent = deleteLable[i].parentElement.parentElement
					// this表示当前点击的超链接const
					const parent = this.parentNode.parentNode //也可以获取父节点的父节点

					//获取要删除的员工的姓名
					// const empName = parent.getElementsByTagName("td")[0].textContent
					const empName = parent.getElementsByTagName("td")[0].textContent

					let flag = confirm("确定要删除【" + empName + "】吗？")
					if (flag) {
						parent.remove()
					}
					//本练习中的超链接，我们是不希望发生跳转，但是跳转行为是超链接的默认行为
					//只要点击超链接就会触发页面的跳转,事件中可以通过取消默认行为来阻止超链接的跳转
					//使用return false来取消默认行为，只在 xxx.xxx= function(){}这种形式绑定的事件中才适用
					return false;
				}

				const deleteLable = document.querySelectorAll(".delete")
				for (let i = 0; i < deleteLable.length; i++) {
					deleteLable[i].onclick = delEmpHandler;

					//这种事件无法使用return false来取消默认行为
					deleteLable[i].addEventListener("click", function() {
						return false; //无法取消默认行为
					})
				}



				const tBody = document.getElementsByTagName("tbody")[0]

				const addBtn = document.getElementsByTagName("button")[0]
				addBtn.onclick = function() {


					/* 
					// 这种写法，容易被xss的攻击tbody.insertAdjacentHTML("beforeend"
					<tr>
					<td>${name}</td><td>${email}</td><td>${salary}</td>
					<td>删除</td></tr>
					 */

					//获取输入的值不是textContent，而是value
					const name = document.getElementById("name").value;
					const email = document.getElementById("email").value
					const salary = document.getElementById("salary").value

					if (name.length === 0 || email.length === 0 || salary.length === 0) {
						alert("请输入完整数据");
						return;
					}
					const trlable = document.createElement("tr")
					tBody.insertAdjacentElement("beforeend", trlable)

					const tdName = document.createElement("td")
					tdName.textContent = name;
					trlable.insertAdjacentElement("beforeend", tdName);

					const tdEmail = document.createElement("td")
					tdEmail.textContent = email;
					trlable.insertAdjacentElement("beforeend", tdEmail);

					const tdSolary = document.createElement("td")
					tdSolary.textContent = salary;
					trlable.insertAdjacentElement("beforeend", tdSolary);

					const tdDelete = document.createElement("td")
					const aLable = document.createElement("a")
					aLable.textContent = "删除"
					aLable.href = "javascript:;"
					tdDelete.insertAdjacentElement("beforeend", aLable);
					trlable.insertAdjacentElement("beforeend", tdDelete)

					// 由于上边的超链接是新添加的，所以它的上边并没有绑定单级响应函数，所以新添加的员工无法删除
					//解决方式:为新添加的超链接单独绑定响应函数
					let links = document.links;
					links[links.length - 1].onclick = delEmpHandler

					return false;
				}
			}
		</script>
	</head>
	<body>
		<div class="outter">
			<table>
				<tbody>
					<tr>
						<th>姓名</th>
						<th>邮件</th>
						<th>薪资</th>
						<th>操作</th>
					</tr>
					<tr>
						<td>孙悟空</td>
						<td>swk@qq.com</td>
						<td>1000</td>
						<!-- <td><a href="#" class="delete">删除</a></td> -->
						<!-- 取消默认跳转的第二种方式 -->
						<!--这句意思是不要去跳转了，去执行js代码，而js代码是空的，就是说什么也不做。 -->
						<td><a href="javascript:;" class="delete">删除</a></td>
					</tr>
					<tr>
						<td>猪八戒</td>
						<td>zbj@qq.com</td>
						<td>800</td>
						<td><a href="#" class="delete">删除</a></td>
					</tr>
					<tr>
						<td>沙和尚</td>
						<td>shs@qq.com</td>
						<td>600</td>
						<td><a href="#" class="delete">删除</a></td>
					</tr>
				</tbody>

			</table>
			<form action="#">
				<div>
					<label for="name">姓名</label>
					<input type="text" id="name" />
				</div>
				<div>
					<label for="email">邮件</label>
					<input type="email" id="email" />
				</div>
				<div>
					<label for="salary">薪资</label>
					<input type="number" id="salary" />
				</div>
				<button type="button">添加</button>
			</form>
		</div>
	</body>
</html>